<!--
 * @Description: LAN - TOP N
 * @Author: 0001100986/LiuShuai
 * @Date: 2020-11-18 15:47:15
 * @LastEditTime: 2021-11-11 16:21:30
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="dialogbg" v-show="dialogLan">
    <div class="dialogbox">
      <div class="boxmain">
        <div class="box-title">
          LAN-TOP
          <label @click="cancel">
            <i class="el-icon-close"></i>
          </label>
        </div>
        <div class="box-content chart-box">
          <el-input placeholder="请输入TOP值" v-model="size">
            <el-button slot="append" icon="el-icon-search" @click="getTop"></el-button>
          </el-input>
          <div id="lanTop"></div>
          <div v-show="topSum === 0" class="noval">
            <div class="noval-content">
              <i class="iconfont">&#xe707;</i>
              <p>暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Chart } from '@antv/g2';
export default {
  name: 'LanTop',
  props: ['dialogLan'],
  data () {
    return {
      topSum: 0,
      size: null,
      tableData: []
    };
  },
  mounted () {
    // 监听键盘按键事件
    let _this = this;
    _this.$nextTick(() => {
      document.addEventListener('keyup', (e) => {
        // 监听ESC按钮
        if (e.keyCode === 27) {
          _this.$emit('changeLan', false);
        }
      });
    });
  },
  methods: {
    // 取消关闭
    cancel () {
      let _this = this;
      _this.$emit('changeLan', false);
    },
    // 过滤换算 BPS
    filterKM (v) {
      v = Number(v);
      if (v >= 0 && v < 1000) {
        v = v.toFixed(2) + 'bps';
      }
      if (v >= 1000 && v < 1000000) {
        v = (v / 1000).toFixed(2) + 'Kbps';
      }
      if (v >= 1000000) {
        v = (v / 1000000).toFixed(2) + 'Mbps';
      }
      return v;
    },
    getTop () {
      let _this = this;
      _this.$http.get({
        url: '/api/sdwan/pm/top'
      }).then(res => {
        let { status, resultBody } = res;
        if (status === '0') {
          let { downTop, upTop5 } = resultBody;
          // _this.topSum = downTop ? downTop.length : 0;
          _this.topSum = 0;
          let arry = [];
          let bwx = [];
          let down = downTop.reverse();
          let up = upTop5.reverse();
          for (let i = 0; i < down.length; i++) {
            arry.push({ type: down[i].userlabel + ' - 上行', value: down[i].speed, cat: '上行带宽' });
            bwx.push(downTop[i].speed);
          }
          for (let i = 0; i < up.length; i++) {
            arry.push({ type: up[i].userlabel + ' - 下行', value: up[i].speed, cat: '下行带宽' });
            bwx.push(upTop5[i].speed);
          }
          _this.tableData = arry;
          let charts = document.getElementById('lanTop');
          if (charts) {
            document.getElementById('lanTop').innerHTML = '';
          }
          _this.topChartInit(bwx);
        }
      });
    },
    topChartInit (bwx) {
      let _this = this;
      const topChart = new Chart({
        container: 'lanTop',
        autoFit: true,
        height: 350
      });
      topChart.data(_this.tableData);
      topChart.scale({
        value: {
          max: Math.max(...bwx) + 15000,
          min: 0,
          alias: '带宽速率',
        },
      });
      topChart.axis('type', false);
      topChart.axis('value', {
        label: null,
        title: {
          offset: 30,
          style: {
            fontWeight: 300,
          },
        },
        grid: null,
      });
      topChart.legend(false);
      topChart.coordinate('rect').transpose();
      topChart.interval().position('type*value').color('cat', ['#f3a058', '#4ed2a2']).size(26).label('value', {
        style: {
          fill: '#8d8d8d',
        },
        offset: 10,
        content: (originData) => {
          return (this.filterKM(originData.value)).replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        },
      });
      topChart.tooltip({
        customItems: (items) => {
          items[0].value = this.filterKM(items[0].value);
          return items;
        },
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{title} {value}</li>'
      });
      topChart.annotation().line({
        start: ['-20%', '50%'],
        end: ['100%', '50%'],
        style: {
          stroke: '#c0c0c0',
          lineDash: [2, 2],
        },
      });
      topChart.render();
    }
  }
};
</script>
<style lang="scss" scoped>
// LAN端口 - TopN
.dialogbg {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(55, 55, 55, 0.6);
  height: 100%;
  z-index: 1010;
  overflow: auto;
  .dialogbox {
    width: 500px;
    margin: 0 auto;
    position: relative;
    outline: 0;
    top: 15%;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    .boxmain {
      -webkit-overflow-scrolling: touch;
      top: 150px;
      left: 0;
      margin: 0;
      padding: 0;
      background-color: #fff;
      -webkit-background-clip: content;
      border-radius: 2px;
      box-shadow: 1px 1px 50px rgba(0, 0, 0, 0.3);
      .box-title {
        padding: 15px 20px;
        border-bottom: 1px solid #f0f0f0;
        line-height: 24px;
        font-size: 18px;
        color: #303133;
        overflow: hidden;
        background-color: #fff;
        border-radius: 5px 5px 0 0;
        label {
          display: inline-block;
          font-size: 16px;
          position: absolute;
          top: 16px;
          right: 20px;
          i {
            cursor: pointer;
          }
          &:hover {
            color: #409eff;
          }
        }
      }
      .box-content {
        padding: 20px;
        line-height: 24px;
        font-size: 14px;
        overflow-x: hidden;
        overflow-y: auto;
      }
      .chart-box {
        position: relative;
        height: 400px;
        overflow: hidden;
        .noval {
          background: #fff;
          width: 100%;
          height: 400px;
          position: relative;
          top: 0;
          left: -5%;
          .noval-content {
            position: absolute;
            top: 40%;
            left: 50%;
            text-align: center;
            i {
              color: #d7d6d6;
              font-size: 40px;
            }
            p {
              color: #999;
              font-size: 13px;
              line-height: 30px;
              margin-top: 10px;
            }
          }
        }
      }
      .box-footer {
        padding: 15px 20px;
        border-top: 1px solid #f0f0f0;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
@media screen and (max-width: $device-ipad) {
  .dialogbg {
    .dialogbox {
      width: auto;
      margin: 0 5%;
    }
  }
}
</style>